According to William S. Cleveland dotplots are an alternative to the bar chart, in which dots are used to depict the quantitative values (e.g. counts) associated with categorical variables.
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"</canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
<!-- Create the data for the graph -->
var data = {
"x" : {
"Color" : ["A","B","B","C","C","C","D","D","E","E","F","F","F","F","G","G"],
"Size" : [1,2,3,1,2,3,2,3,5,4,5,2,3,2,1,2],
"Task" : ["Initial Meeting","Needs Assessment","Research","Site Outline","Site Map","Wireframes","Wireframes Review","Content ","Landing Page Artwork","Inner Pages Artwork","Coding","Validation","Content Population","Cross Platform & Browser Testing","Refinement","Launch & Search Engine Submission"]
},
"y" : {
"data" : [
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
],
"smps" : ["2021-12-31","2021-03-01","2021-03-31","2021-05-30","2021-06-29","2021-07-29","2021-10-27","2021-11-26","2021-03-26","2021-05-25","2021-09-22","2021-10-22","2021-11-21","2021-12-21","2021-03-21","2021-04-20"],
"vars" : ["Unit"]
}
}
<-- Create the configuration for the graph -->
var config = {
"colorBy":"Color",
"colorScheme":"LastAirBenderWater",
"decorations":{
"line":[
{
"align":"left",
"color":"rgba(0,0,0,0.5)",
"value":1,
"width":1
}
]
},
"graphOrientation":"vertical",
"graphType":"Dotplot",
"isGraphTime":"true",
"marginLeft":"70",
"marginRight":"70",
"objectColorTransparency":0.6,
"showLegend":"false",
"sizeBy":"Size",
"sizes":[
"2",
"15",
"25",
"35",
"70",
"150"
],
"smpLabelInterval":"100",
"smpLabelRotate":"90",
"timeFormat":"isoDate",
"xAxis2Show":"false",
"xAxisShow":"false",
"xAxisTicksMajorShow":"false",
"xAxisTicksMinorShow":"false"
}
<!-- Call the CanvasXpress function to create the graph -->
var cX = new CanvasXpress("canvasId", data, config);
</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-timeliner-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/cX-timeliner-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
smpAnnot=x,
colorBy="Color",
colorScheme="LastAirBenderWater",
decorations=list(line=list(list(align="left", color="rgba(0,0,0,0.5)", value=1, width=1))),
graphOrientation="vertical",
graphType="Dotplot",
isGraphTime=TRUE,
marginLeft=70,
marginRight=70,
objectColorTransparency=0.6,
showLegend=FALSE,
sizeBy="Size",
sizes=list(2, 15, 25, 35, 70, 150),
smpLabelInterval=100,
smpLabelRotate=90,
timeFormat="isoDate",
xAxis2Show=FALSE,
xAxisShow=FALSE,
xAxisTicksMajorShow=FALSE,
xAxisTicksMinorShow=FALSE
)
Create New Page